<template>
  <div class="upload_file_box">
    <el-button size="mini" @click="handelSelectFile" :disabled="disabled" v-show="show"> 上传附件 </el-button>
    <div class="file_list_box">
      <UploadList @remove="remove" :files="showFileList" :handlePreview="handlePreview" />
    </div>
  </div>
</template>

<script>
import config from '@/utils/config/config.js'
import { selectFile } from './common.js'
import { delFileByFid, uploadFileOne, getGroupFileData } from '@/utils/apiList/api'
import UploadList from 'element-ui/packages/upload/src/upload-list.vue'
import { previewFile, downloadFile } from '@/utils/tools/wpsParm.js'

export default {
  name: 'UploadX',
  props: {
    show: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 可上传的文件类型
    accept: {
      type: String,
      default: '*'
    },
    // 文件组id
    groupId: {
      type: String,
      default: ''
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: true
    }
  },
  components: {
    UploadList
  },
  data() {
    return {
      fileList: [],
      uploadFileList: [],
      handlePreview: function (file) {
        let regOther = /\.(doc|dot|wps|wpt|docx|dotx|ofd|pdf|xls|xlt|et|ett|xlsx|xltx)$/i
        if (regOther.test(file.fileName) && file.id) {
          previewFile({ fileId: file.id })
        } else {
          downloadFile(file.id)
        }
      }
    }
  },
  watch: {
    groupId(v) {
      if (!this.isHandel) {
        this.initGetFileList()
      }
    }
  },
  computed: {
    showFileList(v) {
      return this.fileList.map((e) => {
        return {
          ...e,
          uid: e.id,
          name: e.fileName,
          status: 'success'
        }
      })
    }
  },
  created() {
    this.isHandel = false
    this.initGetFileList()
  },
  methods: {
    initGetFileList() {
      if (!this.groupId) {
        this.fileList = []
        return
      }
      getGroupFileData({ id: this.groupId }).then((res) => {
        if (Array.isArray(res)) {
          this.fileList = res
        }
      })
    },
    // 文件添加
    handelSelectFile() {
      selectFile(this.multiple).then((files) => {
        this.$emit('addFileChange', files)
        this.handelUploadFile(files)
      })
    },
    // 文件上传
    async handelUploadFile(fileList) {
      let groupId = this.groupId
      for (let file of fileList) {
        let form = new FormData()
        form.append('osTenantId', config.commonParameter.osTenantId)
        form.append('code', 'ATTACHMENT')
        if (groupId) {
          form.append('groupId', groupId)
        }
        form.append('file', file)
        const resData = await uploadFileOne(form)
        const [res] = resData
        this.fileList.push(res)
        if (!groupId && res) {
          groupId = res.groupId
        }
      }
      // 第一次则修改组id
      if (!this.groupId) {
        this.isHandel = true
        this.$emit('update:groupId', groupId)
      }
    },
    // 文件删除
    async remove(file) {
      await this.$confirm(`确定删除 ${file.name}吗？`)
      let res = await delFileByFid({ id: file.uid })
      if (res.status != 1) {
        this.fileList = this.fileList.filter((e) => e.id != file.uid)
      }
    }
  }
}
</script>
